<template>
    <section class="animate__animated animate__bounceInRight animate__slow">
        <div class="logo_bg">
            <img v-if="!!userInfo.base64" :src="userInfo.base64" />
            <img v-else :src="defaultImg">
        </div>
        <div class="userinfo_content">
            <h3>— {{ userInfo.chinaname }} —</h3>
            <p class="p_info">QQ：{{ userInfo.qqnumber }}</p>
            <n-ellipsis :line-clamp="2">
                <p class="p_info">{{ $t("text.authorization") }}：{{ userInfo.roleListName }}</p>
            </n-ellipsis>
        </div>
    </section>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/stores/user';
import defaultImg from '@/assets/images/avatar.png';
const userStore = useUserStore();
const { userInfo } = userStore;
</script>
<style scoped lang='scss'>
section {
    grid-area: right;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.27);

    @include useTheme {
        background: getVar('rawBg');
    }

    display:grid;
    grid-template-columns:40% 60%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .logo_bg {
        background: #272a31;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            height: 80px;
            width: 80px;
            border-radius: 50%;
            border: 3px solid #fff;
        }
    }

    .userinfo_content {
        padding: 10%;

        .p_info {
            margin: 0;

            @include useTheme {
                color: getVar('cardThemeTextColor');
            }
        }
    }
}
</style>